<template>
  <div class="user-activity">
    <a-divider>博客数据统计</a-divider>
    <div class="num-block-box">
      <div class="el-row">
        <div class="el-col el-col-6">
          <div class="item"><p class="title">文章总数</p>
            <p class="num">{{ blogDataStatisticsData.articleNum }}</p></div>
        </div>
        <div class="el-col el-col-6">
          <div class="item"><p class="title">粉丝数</p>
            <p class="num">{{ blogDataStatisticsData.followNum }}</p></div>
        </div>
        <div class="el-col el-col-6">
          <div class="item"><p class="title">点赞数</p>
            <p class="num">{{ blogDataStatisticsData.likeNum }}</p></div>
        </div>
        <div class="el-col el-col-6">
          <div class="item"><p class="title">阅读量</p>
            <p class="num">{{ blogDataStatisticsData.viewNum }}</p></div>
        </div>
        <div class="el-col el-col-6">
          <div class="item"><p class="title">收藏数</p>
            <p class="num">{{ blogDataStatisticsData.collectNum }}</p></div>
        </div>
        <div class="el-col el-col-6">
          <div class="item"><p class="title">分类数</p>
            <p class="num">{{ blogDataStatisticsData.sortNum }}</p></div>
        </div>
        <div class="el-col el-col-6">
          <div class="item"><p class="title">标签数</p>
            <p class="num">{{ blogDataStatisticsData.lableNum }}</p></div>
        </div>
      </div>
    </div>
    <a-divider>全部文章</a-divider>
    <div style="margin-top: 20px">
      <div class="title">
        <a-month-picker :default-value="moment(new Date(), 'YYYY-MM')" format="YYYY-MM" @change="changeData"/>
      </div>
      <div class="content">
        <div id="articleStatistics" style="width:100%;height: 400px;"/>
      </div>
    </div>
  </div>
</template>

<script>
import {getAction} from '@/api/manage'
import echarts from 'echarts'
import moment from 'moment'

export default {
  data() {
    return {
      carouselImages: [
        'https://wpimg.wallstcn.com/9679ffb0-9e0b-4451-9916-e21992218054.jpg',
        'https://wpimg.wallstcn.com/bcce3734-0837-4b9f-9261-351ef384f75a.jpg',
        'https://wpimg.wallstcn.com/d1d7b033-d75e-4cd6-ae39-fcd5f1c0a7c5.jpg',
        'https://wpimg.wallstcn.com/50530061-851b-4ca5-9dc5-2fead928a939.jpg'
      ],
      url: {
        blogDataStatistics: '/article/blogDataStatistics',
        articleStatisticsLineChart: '/article/articleStatisticsLineChart',
      },
      blogDataStatisticsData: {},
    }
  },

  mounted() {
    this.initArticleStatistics('')
    this.blogDataStatistics()
  },
  methods: {
    moment,
    blogDataStatistics() {
      getAction(this.url.blogDataStatistics, {}).then(res => {
        if (res.success) {
          this.blogDataStatisticsData = res.result
        }
      })
    },
    changeData(mom, dateStr) {
      this.initArticleStatistics(dateStr)
    },
    initArticleStatistics(month) {
      getAction(this.url.articleStatisticsLineChart, {'month': month}).then(res => {
        if (res.success) {
          this.articleStatisticsData = res.result
          this.initLineChart()
        }
      })
    },
    initLineChart() {
      this.chart = echarts.init(document.getElementById('articleStatistics'))
      const option = {
        color: ['#91cc75', '#fac858', '#73c0de', '#ea7ccc'],
        // title: {
        //   articleBody: '详细统计'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['文章数', '阅读数', '收藏数', '点赞数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '文章数',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '阅读数',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '收藏数',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '点赞数',
            type: 'line',
            stack: 'Total',
            data: []
          }
        ]
      }
      this.articleStatisticsData.forEach(item => {
        option.xAxis.data.push(item.month)
        option.series[0].data.push(item.articleNum)
        option.series[1].data.push(item.viewsNum)
        option.series[2].data.push(item.collectNum)
        option.series[3].data.push(item.likesNum)
      })

      this.chart.setOption(option)
      let _this = this
      // 浏览器大小改变时重置大小
      window.onresize = function () {
        _this.chart.resize()
      }

      // 容器大小改变时重置大小
      this.$nextTick(() => {
        _this.chart.resize()
      })
    },
  }
}
</script>

<style scoped>
.el-row {
  position: relative;
  flex-wrap: wrap;
  box-sizing: border-box;
}

div.num-block-box .item:nth-child(4n+1) {
  margin-left: 0;
}

div.num-block-box .item {
  padding: 15px 24px 17px 24px;
}

div.num-block-box .item p.title {
  font-size: 14px;
  color: #3d3d3d;
  line-height: 22px;
}

div.num-block-box .item p {
  margin: 0;
  text-align: center;
}

div.num-block-box .item p.num {
  font-size: 20px;
  font-weight: 600;
  color: #2e2e2e;
  line-height: 33px;
}
</style>
